<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<!-- 引入Bootstrap -->
		<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

                <!-- bootstrap的javascript插件--需要引用jQuery -->
		<script src="bootstrap/js/jquery.min.js"></script>
		
		<!--包括所有已编译的插件-->
		<script src="bootstrap/js/bootstrap.min.js"></script>
	</head>
	<body>
		<div class="container">
			<div>
				<h3 class="text-center text-primary">Bootstrap 输入框组</h3>
				<p style="border:1px solid black; margin:50px 0; padding:20px;">
					本章将讲解 Bootstrap 支持的另一个特性，输入框组。输入框组扩展自 表单控件。
					使用输入框组，您可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮。
					通过向输入域添加前缀和后缀的内容，您可以向用户输入添加公共的元素。
					<br>
					例如，您可以添加美元符号，或者在 Twitter 用户名前添加 @，或者应用程序接口所需要的其他公共的元素。
					向 .form-control 添加前缀或后缀元素的步骤如下：	
					<br>
					1,把前缀或后缀元素放在一个带有 class .input-group 的 div 中。<br>
					2,接着，在相同的 div> 内，在 class 为 .input-group-addon 的 span> 内放置额外的内容。<br>
					3,把该 span> 放置在 input> 元素的前面或者后面。 <br>
					【注】为了保持跨浏览器的兼容性，请避免使用  select> 元素，因为它们在 WebKit 浏览器中不能完全渲染出效果。
					也不要直接向表单组应用输入框组的 class，输入框组是一个孤立的组件。
				</p>
				
			</div>
			
			<div style="border:1px solid black; margin:50px 0; padding:20px;">
				<h3 class="text-primary">基本的输入框组</h3>
				
				<div style="padding: 100px 100px 10px;">
				   <form class="bs-example bs-example-form" role="form">
				      <div class="input-group">
				         <span class="input-group-addon">@</span>
				         <input type="text" class="form-control" placeholder="twitterhandle">
				      </div>
				      <br>
				
				      <div class="input-group">
				         <input type="text" class="form-control">
				         <span class="input-group-addon">.00</span>
				      </div>
				      <br>
				      <div class="input-group">
				         <span class="input-group-addon">$</span>
				         <input type="text" class="form-control">
				         <span class="input-group-addon">.00</span>
				      </div>
				   </form>
			   </div>
			  
			</div>
			
			<div style="border:1px solid black; margin:50px 0; padding:20px;">
				<h3 class="text-primary">输入框组的大小</h3>
				您可以通过向 .input-group 添加相对表单大小的 class
				（比如 .input-group-lg、input-group-sm、input-group-xs）来改变输入框组的大小。输入框中的内容会自动调整大小。
				
				<div style="padding: 100px 100px 10px;">
				   <form class="bs-example bs-example-form" role="form">
				      <div class="input-group input-group-lg">
				         <span class="input-group-addon">@</span>
				         <input type="text" class="form-control" placeholder="Twitterhandle">
				      </div><br>
				
				      <div class="input-group">
				         <span class="input-group-addon">@</span>
				         <input type="text" class="form-control" placeholder="Twitterhandle">
				      </div><br>
				
				      <div class="input-group input-group-sm">
				         <span class="input-group-addon">@</span>
				         <input type="text" class="form-control" placeholder="Twitterhandle">
				      </div>
				   </form>
				 </div>
			</div>
			
		</div>
		
	</body>
</html>
